<template>
  <a-layout style="height: 1400px">
    <a-layout-content id="bankList" style="height: 700px">
      <a-row>
        <a-col flex="auto">
          <h3>为你推荐</h3>
        </a-col>
        <a-col flex="100px">
          <h3 class="more" @click="clickMoreBank">更多 ></h3>
        </a-col>
      </a-row>
      <!-- 展示题库 -->
      <a-row v-if="bankItems.length>0" :gutter="24">
        <a-col :span="8" v-for="item in bankItems" :key="item.id">
          <QuestionBank :icon-url="item.bankIcon" :item-id="item.id" :item-title="item.title"
                        :answerable="true"></QuestionBank>
        </a-col>
      </a-row>
      <a-row v-else class="empty-container">
        <a-col>
          <a-empty>
            没有推荐的题库信息，试着前往题库做题吧^_^~
          </a-empty>
        </a-col>
      </a-row>
    </a-layout-content>
    <a-layout-content id="postList">
      <!--顶部标题-->
      <a-row>
        <a-col flex="auto">
          <h3>帖子</h3>
        </a-col>
      </a-row>
      <!--展示帖子-->
      <PostList
          :data="data"
          :total="total"
          @get-data="getData"
      >
      </PostList>
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {listQuestionBankVOByRecommend} from "@/api/QuestionBankRequest";
import router from "@/router/router";
import QuestionBank from "@/components/QuestionBank.vue";
import PostList from "@/components/PostList.vue";
import {listPostVOByPageUsingPost} from "@/api/PostRequest";

// 题库数组
var bankItems = ref([]);
// 用户登录信息
onMounted(async () => {
  let result = await listQuestionBankVOByRecommend({
    current: 1,
    pageSize: 18
  });
  if (result.data.code === 0) {
    bankItems.value = result.data.data.records;
  }
})

// 点击更多题库
function clickMoreBank() {
  router.push("/questionBank");
}

const data = ref([]);
const total = ref(0);

async function getData(current, pageSize) {
  const result = await listPostVOByPageUsingPost({
    current: current,
    pageSize: pageSize,
    sortField: 'createTime',
    sortOrder: 'descend',
  });
  data.value = result.data.data.records;
  total.value = result.data.data.total;
}
</script>

<style scoped>
#bankList {
  margin-bottom: 28px;
  padding: 20px;
  box-shadow: #eee 1px 1px 5px;
}

#postList {
  margin-bottom: 28px;
  padding: 20px;
  box-shadow: #eee 1px 1px 5px;
}

.more {
  cursor: pointer;
}

/* 使用 Grid 布局让 a-empty 垂直居中 */
.empty-container {
  display: grid;
  place-items: center;
  justify-content: center;
  height: 100%;
}
</style>